import type { ITopicInfoResponse } from '@/api/myResearch';
import { Form, Input, Modal } from 'antd';
import TextArea from 'antd/es/input/TextArea';
import { type FC, useEffect, useState } from 'react';

interface CreateTopicModalProps {
	visible: boolean;
	onCancel: () => void;
	onOk: (values: { name: string; tags: string }) => Promise<void> | void;
	initialValues?: ITopicInfoResponse | null;
}

/**
 * 创建/编辑选题的模态框组件
 * @param visible - 模态框是否可见
 * @param onCancel - 取消回调函数
 * @param onOk - 确认回调函数，支持异步操作
 * @param initialValues - 初始值，用于编辑模式
 * @returns 创建选题模态框组件
 */
const CreateTopicModal: FC<CreateTopicModalProps> = ({
	visible,
	onCancel,
	onOk,
	initialValues
}) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		if (visible) {
			if (initialValues) {
				form.setFieldsValue(initialValues);
			} else {
				form.resetFields();
			}
		}
	}, [initialValues, form, visible]);

	/**
	 * 处理确认提交操作
	 * 验证表单并调用 onOk 回调，支持异步操作和 loading 状态
	 */
	const handleOk = async () => {
		try {
			const values = await form.validateFields();
			setLoading(true);

			// 调用 onOk 回调，支持同步和异步操作
			await Promise.resolve(onOk(values as { name: string; tags: string }));

			setLoading(false);
		} finally {
			setLoading(false);
		}
	};

	/**
	 * 处理取消操作
	 * 重置表单并调用 onCancel 回调
	 */
	const handleCancel = () => {
		form.resetFields();
		onCancel();
	};

	return (
		<Modal
			title={initialValues ? '编辑选题' : '新建选题'}
			width={450}
			open={visible}
			onOk={handleOk}
			onCancel={handleCancel}
			confirmLoading={loading}
			okText="确定"
			cancelText="取消"
			styles={{ footer: { textAlign: 'center' } }}>
			<Form className="m-30" form={form} name="form_in_modal">
				<Form.Item
					name="name"
					label="选题名称"
					rules={[{ required: true, message: '请输入选题名称' }]}>
					<Input placeholder="请输入选题名称" />
				</Form.Item>
				<Form.Item
					name="tags"
					label="选题标签"
					rules={[{ required: true, message: '请输入选题标签' }]}>
					<TextArea rows={4} placeholder="请输入选题标签，多个标签用逗号隔开" />
				</Form.Item>
			</Form>
		</Modal>
	);
};

export default CreateTopicModal;
